<template>
	<view v-if="jifentprice_info.isopen == 1 || jifenbook_info.isopen == 1 || jifencomment_info.isopen == 1" class="discount-grade">
		<view class="grade detail-nav-bar" :class="{borderTop: borderTop}" @click="open">
			<view class="left"  >
				<!-- <text class="icon-that iconfont">&#xe678;</text> -->
				<view class="item">
					<view v-if="jifenbook_info.isopen == 1 || jifencomment_info.isopen == 1"><text class="iconfont" >&#xe67b;</text>获赠积分</view>
					<view v-if="jifentprice_info.id && jifentprice_info.isopen == 1"><text class="iconfont" >&#xe67b;</text>积分抵扣</view>
				</view>
			</view>
			<view class="right"><text class="icon-right iconfont">&#xe67f;</text></view>
			
		</view>
		<uni-popup ref="popupJifen"  type="bottom">
			<view class="integral-con">
				<view class="title">
					积分优惠
				</view>
				<view class="info">
					
					<block v-if="jifentprice_info.id && jifentprice_info.isopen == 1">
						<view class="info__title">
							积分抵扣
						</view>
						<view class="info__content">
							购买该产品可使用积分抵现<text class="discount">({{jifentprice_info.toplimit}}积分抵{{jifentprice_info.jifentprice}}元)</text>
						</view>
					</block>	
					
					<block v-if="jifenbook_info.isopen == 1 || jifencomment_info.isopen == 1">
						<view class="info__title">
							获赠积分
						</view>
						<view v-if="jifenbook_info.isopen == 1 && jifenbook_info.value" class="info__content">
							购买该产品可获得<text class="discount"><block v-if="jifenbook_info.rewardway == 1">订单总额{{jifenbook_info.value}}%的</block><block v-else>{{jifenbook_info.value}}</block>积分</text>
						</view>
						<view v-if="jifencomment_info.isopen == 1 && jifencomment_info.value" class="info__content">
							评论该产品可获得<text class="discount"><block v-if="jifencomment_info.rewardway == 1">订单总额{{jifencomment_info.value}}%的</block><block v-else>{{jifencomment_info.value}}</block>积分</text>
						</view>
					</block>
				</view>
				
			</view>
		</uni-popup>
	</view>
</template>

<script>
	/**
	 * 积分
	 */
	import uniPopup from "../components/uni-popup/uni-popup.vue";
	export default {
		components: {
			uniPopup
		},
		name: 'stProductIntegral',
		props: {
			jifentprice_info: {
				type:  [Object,Boolean],
				default () {
					return {}
				}
			},
			jifenbook_info: {
				type: [Object,Boolean],
				default () {
					return {}
				}
			},
			jifencomment_info: {
				type: [Object,Boolean],
				default () {
					return {}
				}
			},
			borderTop: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		},
		methods: {
			open() {
				this.$refs.popupJifen.open()
			}
		}
	}
</script>

<style lang="scss" scoped>

	.detail-nav-bar {
		@extend .justifyspacec;

		.icon-right {
			margin-left: 7rpx;
		}

		.left {
			@extend .alignJustify;
		}

		.right {
			@extend .alignItems;
			font-size: $uni-font-size-mini;
		}
	}
	.borderTop{
		border-top: 1rpx solid $uni-border-color;
	}
	.discount-grade {
		padding: 0 25rpx;
        background: linear-gradient(360deg, #F4FFF7 1%, rgba(247,255,249,0) 100%);
		font-size: $uni-font-size-mini;

		.discount,
		.grade {
			height: 80rpx;
		}

		.discount {
			overflow: hidden;

			.item {
				&>view {
					position: relative;
					height: 34rpx;
					margin-right: 10rpx;
					padding: 0 12rpx;
					background-color: #fff0e7;
					color: #ff6e29;
					font-size: 22rpx;

					&:last-child {
						margin-right: 0;
					}

					&:before,
					&:after {
						content: "";
						position: absolute;
						top: 50%;
						width: 12rpx;
						height: 12rpx;
						margin-top: -6rpx;
						background-color: #fff;
					}

					&:before {
						left: -7rpx;
					}

					&:after {
						right: -7rpx;
					}
				}
			}
		}

		.right {
			color: $uni-text-color-grey;
		}

		.item {
			@extend .displayflex;
		}

		.icon-that {
			margin-right: 25rpx;
			color: #c7cace;
		}

		.grade {
			color: #666;

			.item {
				view {
					@extend .alignItems;
					margin-right: 25rpx;
				}

				.iconfont {
					margin-right: 11rpx;
					color: #2DBB55;
				}
			}
		}
	}
	
	// 积分显示样式
	.integral-con{
		background: $uni-bg-color;
		height: 60vh;
		.title{
			text-align: center;
			font-size: $uni-font-size-lg;
			color: $uni-text-color;
			padding: $uni-spacing-row-sm;
			border-bottom: 1px solid $uni-border-color;
			
		}
		.info{
			padding: $uni-spacing-row-base;
			padding-top: 10rpx;
			&__title{
				font-size: $uni-font-size-base;
				color: $uni-text-color;
				margin-top: 10rpx;
			}
			&__content{
				font-size: $uni-font-size-sm;
				color: $uni-text-color-deep;
				line-height: 32rpx;
				.discount{
					color: $uni-color-warning;
				}
			}
		}
	}
</style>
